<template>
  <div class="">
    <h1>添加地址</h1>

    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
    />
    <!-- vant的地址 组件 -->
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { areaList } from "@vant/area-data";
import { addAddress } from "../../utils/http/shopcar";
export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({});
    const onSave = (con) => {
      // 组件的保存方法的参数就是 填的那些 form的信息
      console.log(con);
      let obj = {
        address: con.addressDetail,
        code: con.postalCode,
        linkMan: con.name,
        mobile: con.tel,
        token: localStorage.getItem("token"),
        provinceId: con.areaCode.slice(0, 2).padEnd(6, "0"),
        cityId: con.areaCode.slice(0, 4).padEnd(6, "0"),
        //padEnd补全字符串 在末尾补全 第一个参数是要补全的位数 第二个参数是 用什么补全
        //在这里城市id 和 省份id 都从 地区编码里截取出来  因为vant 只给我们返回了一个 省市区集合在一起的编码 我们需要的是城市和省份单独的编码 所以需要自己造
      };
      // obj是自己做的数据 要往添加的接口中传的参数
      console.log(obj);
      addAddress(obj).then((res) => {
        console.log(res);
      });
      //调用保存接口
      //点击 保存方法

      // Query参数名	类型	必需	描述	示例 e.g.
      // address	string	是	详细地址
      // cityId	string	是	所属城市编码
      // code	string	是	邮编
      // districtId	string	否	所属区县编码
      // idcard	string	否	身份证号码，国际件使用
      // isDefault	string	否	是否设置为默认收货地址，true 为设置；false 或者不传该参数为 不设置
      // latitude	string	否	坐标 纬度
      // linkMan	string	是	联系人
      // longitude	string	否	坐标 经度
      // mobile	string	是	手机号码
      // provinceId	string	是	所属省份编码
      // status	string	否	状态：0 为正常 1 为停用
      // token	string	是	登录接口返回的token
      //这是复制的接口需要的参数 方便看接口参数名字
    };
    return { ...toRefs(data), areaList, onSave };
  },
};
</script>

<style lang="scss"></style>
